﻿@page "/detection"
@inherits AuthRedirect
@inject NavigationManager NavigationManager
@inject IJSRuntime JSRuntime
@inject IHttpClientFactory HttpClientFactory
@inject AuthenticationStateService AuthenticationStateService
@inject ImageCompressionService ImageCompressionService
@using Microsoft.AspNetCore.Components.Forms
@using System.Text.Json;

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

<div class="detection-container">
    <!-- 顶部导航栏 -->
    <header class="app-header">
        <div class="logo">
            <img src="/logo.png" alt="Logo" class="logo-image">
        </div>
    </header>

    <!-- 主要内容区域 -->
    <main class="main-content">
        <!-- 模型选择卡片 -->
        @if (string.IsNullOrEmpty(selectedModel))
        {
            <div class="card model-select-card">
                <div class="card-header">
                    <i class="bi bi-check2-square" style="color: #4caf50; font-size: 18px;"></i>
                    <span class="section-title">选择识别模型</span>
                </div>
                <div class="card-body">
                    <div class="row">
                        <!-- 消费者模型选项 -->
                        @if (userRole == "consumer")
                        {
                            <div class="col-12 col-sm-6 col-md-4 col-lg-3 mb-3">
                                <div class="card model-card" @onclick="@(() => SelectModel("fruit"))">
                                    <div class="card-body text-center">
                                        <div class="model-content">
                                            <div class="model-icon">🍎</div>
                                            <h5>果实识别模型</h5>
                                            <p class="text-muted">监测果实成熟度和健康状况</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        }

                        <!-- 农民模型选项 -->
                        @if (userRole == "farmer")
                        {
                            <div class="col-12 col-sm-6 col-md-3 col-lg-3 mb-3">
                                <div class="card model-card" @onclick="@(() => SelectModel("seed"))">
                                    <div class="card-body text-center">
                                        <div class="model-content">
                                            <div class="model-icon">🌱</div>
                                            <h5>种子识别模型</h5>
                                            <p class="text-muted">识别种子品质和种类</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-sm-6 col-md-3 col-lg-3 mb-3">
                                <div class="card model-card" @onclick="@(() => SelectModel("growth"))">
                                    <div class="card-body text-center">
                                        <div class="model-content">
                                            <div class="model-icon">🌿</div>
                                            <h5>生长阶段识别</h5>
                                            <p class="text-muted">判断作物生长阶段</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-sm-6 col-md-3 col-lg-3 mb-3">
                                <div class="card model-card" @onclick="@(() => SelectModel("leaf"))">
                                    <div class="card-body text-center">
                                        <div class="model-content">
                                            <div class="model-icon">🍃</div>
                                            <h5>叶片识别模型</h5>
                                            <p class="text-muted">诊断叶片疾病和健康状况</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-sm-6 col-md-3 col-lg-3 mb-3">
                                <div class="card model-card" @onclick="@(() => SelectModel("fruit"))">
                                    <div class="card-body text-center">
                                        <div class="model-content">
                                            <div class="model-icon">🍎</div>
                                            <h5>果实识别模型</h5>
                                            <p class="text-muted">监测果实成熟度和健康状况</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        }
                    </div>
                </div>
            </div>
        }
        else
        {
            <!-- 图像处理区域 -->
            <div class="card image-process-card">
                <div class="card-header">
                    <i class="bi bi-camera" style="color: #4caf50; font-size: 18px;"></i>
                    <span class="section-title">@modelNames[selectedModel]</span>
                    <button type="button" class="btn btn-link back-btn" @onclick="BackToModelSelect">
                        <i class="bi bi-arrow-left"></i>
                        <span>更换模型</span>
                    </button>
                </div>
                <div class="card-body">
                    <!-- 图片展示区域 -->
                    <div class="image-container">
                        @if (string.IsNullOrEmpty(imageSrc))
                        {
                            <div class="text-center">
                                <i class="bi bi-image" style="font-size: 60px; color: #dcdfe6;"></i>
                                <p>请上传图片</p>
                            </div>
                        }
                        else
                        {
                            <img src="@imageSrc" class="uploaded-image" />
                        }
                    </div>

                    <!-- 操作按钮 -->
                    <div class="action-buttons">
                        <button type="button" class="btn btn-outline-primary upload-btn" @onclick="ShowUploadOptions">
                            <i class="bi bi-upload"></i>
                            <span>上传图片</span>
                        </button>

                        <button type="button" class="btn btn-success" disabled="@(string.IsNullOrEmpty(imageSrc))" @onclick="ProcessWithYOLO">
                            <i class="bi bi-bounding-box"></i>
                            <span>YOLO识别</span>
                        </button>
                    </div>

                    <!-- 快捷操作 -->
                    <div class="quick-actions">
                        <button type="button" class="btn btn-link" @onclick="GoToGallery">
                            <i class="bi bi-images"></i>
                            <span>查看图鉴</span>
                        </button>
                        <button type="button" class="btn btn-link" @onclick="GoToHistory">
                            <i class="bi bi-clock-history"></i>
                            <span>历史记录</span>
                        </button>
                    </div>
                </div>
            </div>
        }


        <!-- 上传选项对话框 -->
        <div class="modal @(showOptions ? "show d-block" : "d-none")" tabindex="-1" style="background-color: rgba(0,0,0,0.5);">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">选择上传方式</h5>
                    </div>
                    <InputFile @ref="fileInput"
                    OnChange="HandleFileSelected"
                    accept="image/*"
                    capture="@(useCamera ? "camera" : null)"
                    style="display: none;" />
                    <div class="modal-body text-center">
                        <div class="upload-options">
                            <button type="button" class="btn btn-primary option-btn" @onclick="TakePhoto">
                                <i class="bi bi-camera"></i>
                                <span>拍照上传</span>
                            </button>
                            <button type="button" class="btn btn-success option-btn" @onclick="ChooseFromGallery">
                                <i class="bi bi-card-image"></i>
                                <span>从相册选择</span>
                            </button>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" @onclick="HideUploadOptions">取消</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 处理中遮罩 -->
        <div class="modal @(processing ? "show d-block" : "d-none")" tabindex="-1" style="background-color: rgba(0,0,0,0.5);">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content processing-dialog">
                    <div class="modal-body text-center">
                        <div class="spinner-border text-success" role="status" style="width: 3rem; height: 3rem;">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                        <p class="mt-2 text-success">处理中，请稍候...</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 详情弹窗 -->
        <div class="modal @(showResult ? "show d-block" : "d-none")" tabindex="-1" style="background-color: rgba(0,0,0,0.5);">
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">识别结果</h5>
                        <button type="button" class="btn-close" @onclick="CloseResult"></button>
                    </div>
                    <div class="modal-body">
                        @if (result != null)
                        {
                            <div class="result-content">
                                <div class="row">
                                    <!-- 图片区域 -->
                                    <div class="col-md-8">
                                        <div class="card image-card mb-3">
                                            <div class="card-header">
                                                <i class="bi bi-image" style="color: #4caf50; font-size: 18px;"></i>
                                                <span>识别结果图</span>
                                            </div>
                                            <div class="card-body">
                                                <div class="image-container">
                                                    @if (!string.IsNullOrEmpty(result?.image_64))
                                                    {
                                                        <img src="data:image/jpeg;base64,@result.image_64"
                                                        class="result-image" />
                                                    }
                                                    else
                                                    {
                                                        <div class="no-image-placeholder">
                                                            <i class="bi bi-image"></i>
                                                            <span>暂无结果图片</span>
                                                        </div>
                                                    }
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- 信息区域 -->
                                    <div class="col-md-4">
                                        <div class="card info-card mb-3">
                                            <div class="card-header">
                                                <i class="bi bi-info-circle" style="color: #4caf50; font-size: 18px;"></i>
                                                <span>识别信息</span>
                                                @if (result?.predictions?.Count > 1)
                                                {
                                                    <div class="result-switcher">
                                                        <button class="btn btn-sm btn-outline-secondary"
                                                        disabled="@(currentResultIndex == 0)"
                                                        @onclick="() => SwitchResult(-1)">
                                                            <i class="bi bi-arrow-left"></i>
                                                        </button>
                                                        <span class="result-counter">
                                                            @(currentResultIndex + 1)/@result.predictions.Count
                                                        </span>
                                                        <button class="btn btn-sm btn-outline-secondary"
                                                        disabled="@(currentResultIndex == result.predictions.Count - 1)"
                                                        @onclick="() => SwitchResult(1)">
                                                            <i class="bi bi-arrow-right"></i>
                                                        </button>
                                                    </div>
                                                }
                                            </div>
                                            <div class="card-body">
                                                <dl class="row">
                                                    <dt class="col-sm-4">作物品种</dt>
                                                    <dd class="col-sm-8">
                                                        <span class="badge bg-warning">
                                                            @(CurrentResult?.plant_type ?? "未知")
                                                        </span>
                                                    </dd>

                                                    <dt class="col-sm-4">识别结果</dt>
                                                    <dd class="col-sm-8">
                                                        <span class="badge @GetBadgeClass(CurrentResult?.result_name)">
                                                            @(CurrentResult?.result_name ?? "未知")
                                                        </span>
                                                    </dd>

                                                    <dt class="col-sm-4">置信度</dt>
                                                    <dd class="col-sm-8">
                                                        <span class="badge bg-success">
                                                            @Math.Round((CurrentResult?.confidence ?? 0) * 100)%
                                                        </span>
                                                    </dd>

                                                    <dt class="col-sm-4">识别类型</dt>
                                                    <dd class="col-sm-8">
                                                        <span class="badge @GetBadgeClass(modelFeature[selectedModel])">
                                                            @selectedModel
                                                        </span>
                                                    </dd>
                                                </dl>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- 建议区域 -->
                                <div class="card advice-card">
                                    <div class="card-header">
                                        <i class="bi bi-chat-left-text" style="color: #4caf50; font-size: 18px;"></i>
                                        <span>识别建议</span>
                                    </div>
                                    <div class="card-body">
                                        @if (!string.IsNullOrEmpty(currentAdvice))
                                        {
                                            <div class="advice-content">
                                                @currentAdvice
                                            </div>
                                        }
                                        else
                                        {
                                            <div class="text-center py-3">
                                                <i class="bi bi-info-circle" style="font-size: 48px; color: #dcdfe6;"></i>
                                                <p>暂无相关建议</p>
                                            </div>
                                        }
                                    </div>
                                </div>
                            </div>
                        }
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" @onclick="CloseResult">关闭</button>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 底部导航栏 -->
    <footer class="bottom-nav">
        <div class="nav-menu">
            <div class="nav-item @(activeIndex == "/home" ? "active" : "")" @onclick="@(() => HandleMenuSelect("/home"))">
                <i class="bi bi-house-door"></i>
                <span>首页</span>
            </div>
            <div class="nav-item @(activeIndex == "/detection" ? "active" : "")" @onclick="@(() => HandleMenuSelect("/detection"))">
                <i class="bi bi-camera"></i>
                <span>识别</span>
            </div>
            <div class="nav-item @(activeIndex == "/gallery" ? "active" : "")" @onclick="@(() => HandleMenuSelect("/gallery"))">
                <i class="bi bi-journal-bookmark"></i>
                <span>图鉴</span>
            </div>
        </div>
    </footer>
</div>

@code {
    private string imageSrc = "";
    private bool showOptions = false;
    private bool processing = false;
    private string selectedModel = "";
    private string userRole = "";
    private string userId = "";
    private InputFile fileInput;
    private IBrowserFile? uploadedFile;
    private bool useCamera = false;
    private bool showResult = false;
    private ResultData result;
    private int currentResultIndex = 0;
    private Prediction CurrentResult =>
        result?.predictions?.Count > currentResultIndex
        ? result.predictions[currentResultIndex]
        : new Prediction();
    private string currentAdvice =>
        result?.predictions?.Count > currentResultIndex
        ? result.advice[currentResultIndex]
        : "";
    private Dictionary<string, string> modelNames = new()
    {
        { "seed", "种子识别" },
        { "growth", "生长阶段识别" },
        { "leaf", "叶片识别" },
        { "fruit", "果实识别" }
    };
    private Dictionary<string, int> modelFeature = new()
    {
        { "fruit", 4 },
        { "seed", 1 },
        { "leaf", 3 },
        { "growth", 2 },
    };
    private int selectedFeatureId = 0;
    private List<string> predictions = new();
    private string advice = "";
    private string activeIndex = "/detection";

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            userRole = await JSRuntime.InvokeAsync<string>("localStorage.getItem", "role");
            userId = await JSRuntime.InvokeAsync<string>("localStorage.getItem", "userId");
            StateHasChanged();
        }
    }

    private string GetBadgeClass(object featureId)
    {
        return featureId switch
        {
            1 => "bg-primary",    // 种子质量
            2 => "bg-warning",    // 生长阶段
            3 => "bg-success",    // 叶片疾病
            4 => "bg-danger",     // 果实成熟度
            _ => "bg-info"
        };
    }

    private void SwitchResult(int step)
    {
        var newIndex = currentResultIndex + step;
        if (newIndex >= 0 && newIndex < result.predictions.Count)
        {
            currentResultIndex = newIndex;
            StateHasChanged();
        }
    }

    private void SelectModel(string modelType)
    {
        if (modelType == "seed" || modelType == "growth")
        {
            JSRuntime.InvokeVoidAsync("alert","暂未开放");// 显示警告消息
            return;
        }
        selectedModel = modelType;
        selectedFeatureId = modelFeature[modelType];
    }

    private void BackToModelSelect()
    {
        selectedModel = "";
        imageSrc = "";
    }

    private void ShowUploadOptions()
    {
        showOptions = true;
    }

    private void HideUploadOptions()
    {
        showOptions = false;
    }

    private async Task TakePhoto()
    {
        HideUploadOptions();
        await SimulateFileInput(true);
    }

    private async Task ChooseFromGallery()
    {
        HideUploadOptions();
        await SimulateFileInput(false);
    }

    private async Task SimulateFileInput(bool isCamera)
    {
        useCamera = isCamera;
        await JSRuntime.InvokeVoidAsync("eval",
        "document.querySelector('input[type=file]').click()");
    }


    private async Task HandleFileSelected(InputFileChangeEventArgs e)
    {
        processing = true;
        uploadedFile = e.File;
        await DisplayImage(e.File);
        processing = false;
    }


    private async Task DisplayImage(IBrowserFile file)
    {
        try
        {
            // 读取原始文件
            using (var stream = file.OpenReadStream(maxAllowedSize: 100 * 1024 * 1024))
            {
                byte[] buffer = new byte[4096]; // 4KB分块读取
                int bytesRead;
                MemoryStream memoryStream = new MemoryStream();

                while ((bytesRead = await stream.ReadAsync(buffer, 0, buffer.Length)) > 0)
                {
                    await memoryStream.WriteAsync(buffer, 0, bytesRead);
                }

                byte[] fileBytes = memoryStream.ToArray(); // 最终数据
                Console.WriteLine($"总大小: {fileBytes.Length} 字节");
                // 调用压缩服务
                var compressedData = ImageCompressionService.CompressImage(fileBytes);
                // 显示结果
                imageSrc = $"data:image/jpeg;base64,{Convert.ToBase64String(compressedData)}";
            }
        }
        catch (Exception ex)
        {
            Console.WriteLine($"Error displaying image: {ex.Message}");
        }
    }

    private async Task ProcessWithYOLO()
    {
        // 检查是否选择了文件
        if (uploadedFile == null)
        {
            await JSRuntime.InvokeVoidAsync("alert", "请先上传图片");
            return;
        }

        processing = true;
        StateHasChanged();

        try
        {
            // 1. 创建文件流内容
            using var formContent = new MultipartFormDataContent();
            await using var fileStream = uploadedFile.OpenReadStream(maxAllowedSize: 100 * 1024 * 1024);
            formContent.Add(new StreamContent(fileStream), "file", uploadedFile.Name);

            // 2. 创建Http请求
            var httpClient = HttpClientFactory.CreateClient("DetectionApi");

            // 3. 添加token到header
            var token = await AuthenticationStateService.GetTokenAsync();
            httpClient.DefaultRequestHeaders.Authorization =
                new System.Net.Http.Headers.AuthenticationHeaderValue(token);

            // 4. 构建带参数的URL
            var apiUrl = $"/api/detection?" +
                        $"user_id={userId}" +
                        $"&feature_id={selectedFeatureId}" +
                        $"&method_name=yolo";

            // 5. 发送请求
            var response = await httpClient.PostAsync(apiUrl, formContent);

            var ResponseContent = await response.Content.ReadAsStringAsync();
            Console.WriteLine($"detection API 返回: {ResponseContent}");

            if (response.IsSuccessStatusCode)
            {
                // 6. 处理结果
                var detectionresult = await response.Content.ReadFromJsonAsync<DetectionResult>();
                result = detectionresult.result;
                showResult = true;
            }
            else{
                var error = await response.Content.ReadAsStringAsync();
                await JSRuntime.InvokeVoidAsync("alert", $"识别失败: {error}");
            }    
        }
        catch (Exception ex)
        {
            Console.WriteLine($"Error processing image: {ex.Message}");
            await JSRuntime.InvokeVoidAsync("alert", $"处理图片时出错: {ex.Message}");
        }
        finally
        {
            processing = false;
            StateHasChanged();
        }
    }

    private void GoToGallery()
    {
        NavigationManager.NavigateTo("/gallery");
    }

    private void GoToHistory()
    {
        NavigationManager.NavigateTo("/history");
    }

    private void HandleMenuSelect(string index)
    {
        activeIndex = index;
        NavigationManager.NavigateTo(index);
    }

    private void CloseResult()
    {
        result = null;
        fileInput = null;
        uploadedFile = null;
        showResult = false;
        imageSrc = null;
    }

    public class DetectionResult
    {
        public string status { get; set; }
        public ResultData result { get; set; }
    }

    public class ResultData
    {
        public List<Prediction> predictions { get; set; }
        public string image_64 { get; set; }
        public List<string> advice { get; set; }
    }

    public class Prediction
    {
        public string result_name { get; set; }
        public string plant_type { get; set; }
        public float confidence { get; set; }
    }
}

<style>
    .detection-container {
        height: 100vh;
        display: flex;
        flex-direction: column;
        background-color: #f8faf8;
        font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
    }

    /* 顶部导航栏 */
    .app-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 15px;
        height: 60px;
        background-color: white;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    }

    .logo-image {
        height: 40px;
        border-radius: 40px;
    }

    /* 主要内容区域 */
    .main-content {
        flex: 1;
        padding: 80px 15px 70px;
        overflow-y: auto;
        max-width: 1200px;
        margin: 0 auto;
        width: 100%;
    }

    /* 卡片样式 */
    .model-select-card,
    .image-process-card {
        margin-bottom: 20px;
        border-radius: 12px;
        border: none;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    }

    /* 分区标题 */
    .card-header {
        display: flex;
        align-items: center;
        gap: 8px;
        position: relative;
        background-color: white;
        border-bottom: 1px solid rgba(0,0,0,0.05);
    }

    .section-title {
        font-size: 16px;
        font-weight: bold;
        color: #333;
    }

    .back-btn {
        position: absolute;
        right: 15px;
        color: #4caf50;
        text-decoration: none;
    }

    /* 卡片通用样式 */
    .card {
        margin-bottom: 20px;
        border-radius: 12px;
        border: none;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        background-color: white;
    }

    .card-header {
        display: flex;
        align-items: center;
        gap: 8px;
        position: relative;
        background-color: white;
        border-bottom: 1px solid rgba(0,0,0,0.05);
        padding: 15px 20px;
        border-radius: 12px 12px 0 0 !important;
    }

    .card-body {
        padding: 20px;
    }

    /* 分区标题 */
    .section-title {
        font-size: 16px;
        font-weight: bold;
        color: #333;
    }

    /* 返回按钮 */
    .back-btn {
        position: absolute;
        right: 15px;
        color: #4caf50;
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 5px;
        background: none;
        border: none;
        padding: 5px 10px;
        border-radius: 20px;
        transition: background-color 0.3s;
    }

        .back-btn:hover {
            background-color: rgba(76, 175, 80, 0.1);
        }

    /* 模型卡片 */
    .model-card {
        margin-bottom: 12px;
        border-radius: 10px;
        cursor: pointer;
        transition: all 0.2s;
        height: 95%;
        border: none;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        background-color: white;
    }

        .model-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 4px 12px rgba(76, 175, 80, 0.2);
        }

    .model-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px 10px;
        text-align: center;
    }

        .model-content h5 {
            font-size: 16px;
            color: #333;
            margin: 12px 0 8px;
        }

        .model-content p {
            font-size: 12px;
            color: #888;
            margin: 0;
        }

    /* 模型图标 */
    .model-icon {
        font-size: 48px;
        margin-bottom: 15px;
        line-height: 1;
    }

    /* 图像容器 */
    .image-container {
        width: 100%;
        min-height: 300px;
        border-radius: 8px;
        margin-bottom: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #f5f7fa;
        overflow: hidden;
        border: 1px dashed #dcdfe6;
    }

    .uploaded-image {
        max-width: 100%;
        max-height: 400px;
        width: auto;
        height: auto;
        border-radius: 8px;
        object-fit: contain;
    }

    /* 操作按钮 */
    .action-buttons {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        gap: 15px;
        margin-bottom: 20px;
    }

        .action-buttons .btn {
            width: 100%;
            max-width: 300px;
            height: 44px;
            display: flex;
            margin: 0;
            align-items: center;
            justify-content: center;
            border-radius: 22px;
            font-weight: 500;
            transition: all 0.3s;
        }

    .btn-primary {
        background-color: #4caf50;
        border-color: #4caf50;
    }

    .btn-outline-primary {
        color: #4caf50;
        border-color: #4caf50;
    }

        .btn-outline-primary:hover {
            background-color: #e8f5e9;
        }

    .btn-success {
        background-color: #4caf50;
        border-color: #4caf50;
    }

        .btn-success:hover {
            background-color: #3d8b40;
            border-color: #3d8b40;
        }

    .btn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

    /* 上传按钮特殊样式 */
    .upload-btn {
        background-color: #e8f5e9;
        border-color: #4caf50;
        color: #4caf50;
    }

        .upload-btn:hover {
            background-color: #dcedc8;
        }

    /* 快捷操作区域 */
    .quick-actions {
        display: flex;
        justify-content: center;
        gap: 20px;
        margin-top: 20px;
    }

        .quick-actions .btn-link {
            color: #4caf50;
            padding: 8px 16px;
            border-radius: 20px;
            background-color: rgba(76, 175, 80, 0.1);
            transition: all 0.3s;
            margin: 0;
            text-decoration: none;
            display: flex;
            align-items: center;
            border: none;
        }

            .quick-actions .btn-link:hover {
                background-color: rgba(76, 175, 80, 0.2);
            }

        .quick-actions .material-icons {
            margin-right: 8px;
        }

    /* 上传选项对话框 */
    .modal {
        background-color: rgba(0,0,0,0.5);
    }

    .modal-content {
        border: none;
        border-radius: 12px;
        overflow: hidden;
    }

    .modal-header {
        border-bottom: 1px solid rgba(0,0,0,0.05);
        padding: 15px 20px;
    }

    .modal-title {
        font-size: 16px;
        font-weight: bold;
    }

    .modal-body {
        padding: 30px 20px;
    }

    .modal-footer {
        border-top: 1px solid rgba(0,0,0,0.05);
        padding: 15px 20px;
    }

    /* 上传选项按钮 */
    .upload-options {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .option-btn {
        width: 100%;
        height: 50px;
        font-size: 16px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 25px;
        font-weight: 500;
    }

        .option-btn .material-icons {
            margin-right: 10px;
            font-size: 20px;
        }

    /* 处理中对话框 */
    .processing-dialog {
        background-color: transparent;
        border: none;
    }

    .processing-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 30px;
    }

        .processing-content p {
            margin-top: 15px;
            color: #4caf50;
            font-weight: 500;
        }

    .spinner-border {
        width: 3rem;
        height: 3rem;
        border-width: 0.25em;
    }

    /* 详情弹窗样式 */
    .modal {
        background-color: rgba(0,0,0,0.5);
    }

    .modal-dialog {
        max-width: 90%;
        margin: 1.75rem auto;
    }

    .modal-content {
        border: none;
        border-radius: 12px;
        overflow: hidden;
    }

    .modal-header {
        border-bottom: 1px solid rgba(0,0,0,0.05);
        padding: 15px 20px;
    }

    .modal-title {
        font-size: 16px;
        font-weight: bold;
    }

    .modal-body {
        padding: 20px;
    }

    .modal-footer {
        border-top: 1px solid rgba(0,0,0,0.05);
        padding: 15px 20px;
    }

    /* 图片区域 */
    .image-card {
        margin-bottom: 20px;
        border-radius: 10px;
        border: none;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    }

    .image-container {
        width: 100%;
        height: 400px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #f5f7fa;
        border-radius: 8px;
        overflow: hidden;
    }

    .result-image {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }
    /* 信息区域 */
    .info-card {
        margin-bottom: 20px;
        border-radius: 10px;
        border: none;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    }
    /* 结果切换器 */
    .result-switcher {
        position: absolute;
        right: 15px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .result-counter {
        font-size: 14px;
        color: #666;
    }
    /* 建议区域 */
    .advice-card {
        border-radius: 10px;
        border: none;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    }

    .advice-content {
        padding: 10px;
        color: #666;
        white-space: pre-line;
        line-height: 1.6;
    }

    /* 底部导航栏 */
    .bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 60px;
        background-color: white;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
        z-index: 100;
    }

    .nav-menu {
        display: flex;
        height: 100%;
    }

    .nav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #757575;
        cursor: pointer;
        transition: all 0.3s;
    }

        .nav-item i {
            font-size: 22px;
            margin-bottom: 4px;
        }

        .nav-item span {
            font-size: 12px;
        }

        .nav-item.active {
            color: #4caf50;
        }

        .nav-item:hover {
            color: #2e7d32;
        }
</style>